<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :stripe="stripe"
      border
      :size="size"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      :max-height="maxHeight"
      class="myTable"
    >
      <!-- 是否支持复选 -->
      <el-table-column
        v-if="isSelection"
        width="55"
        type="selection"
        align="center"
        fixed
      />
      <el-table-column
        width="65"
        label="序号"
        type="index"
        align="center"
        fixed
      />
      <el-table-column
        :prop="item.param"
        :label="item.lable"
        v-for="(item, index) in tableColumns"
        :key="index"
        :sortable="item.sortable"
        :width="item.width"
        align="center"
        :filters="item.screen"
        :filter-method="item.screen && filterTag"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <span v-if="item.render">{{ item.render(scope.row) }}</span>
          <slot
            v-else-if="item.slotName"
            :name="item.slotName"
            :scope="scope"
          ></slot>
          <span v-else-if="item.tag">
            <el-popover
              placement="right"
              title=""
              trigger="hover"
              :disabled="opinionText === null"
              :content="opinionText"
              transition=""
              @mouseover.native="
                opinionText = item.titleTxt(scope.row) || '暂无信息'
              "
              @mouseleave="opinionText = null"
              v-if="item.titleTxt"
            >
              <el-tag
                v-for="(tagItem, idx) in statusData"
                :key="idx"
                v-if="item.tag(scope.row) == tagItem.judge"
                :type="tagItem.typeTag"
                slot="reference"
                size="medium"
                >{{ tagItem.statusTxt }}</el-tag
              >
            </el-popover>
          </span>
          <span v-else>{{ scope.row[item.param] }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        align="center"
        v-if="tableOperation.label"
        :label="tableOperation.label"
        :width="tableOperation.width"
      >
        <template slot-scope="scope">
          <slot :name="tableOperation.param" :scope="scope">
            <el-button
              size="small"
              v-for="(item, index) in tableOperation.btnList"
              :key="index"
              @click="handleClick(scope.row, item.genre)"
              :type="item.type"
              v-if="item.vanish"
              :disabled="item.disabledButton"
            >
              {{ item.label }}
            </el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "Table",
  props: {
    tableColumns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    tableOperation: {
      type: Object,
      default: () => {
        return {};
      },
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isSelection: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: Number,
      default: 450,
    },
    statusData: {
      type: Array,
      default: () => {
        return [
          { statusTxt: "待审核", judge: 0, typeTag: "info" },
          { statusTxt: "审核中", judge: 1 },
          { statusTxt: "已驳回", judge: 2, typeTag: "danger" },
          { statusTxt: "已通过", judge: 999, typeTag: "success" },
        ];
      },
    },
  },
  data() {
    return {
      // 提示文本
      opinionText: "",
    };
  },
  mounted() {
    // console.log(this.statusData[0]);
  },
  methods: {
    handleClick(row, type) {
      this.$emit("handleClick", row, type);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    filterTag(value, row) {
      return row.gender == value;
    },
  },
};
</script>
<style lang="scss"></style>
